import { useState } from "react"

interface Product {
  name: string
  category: string
  price: string
  stocked: boolean
}

function FilterProductTable() {
  const products: Product[] = [
    // generate some products
    { name: "Football", category: "Sporting Goods", price: "$49.99", stocked: true },
    { name: "Baseball", category: "Sporting Goods", price: "$9.99", stocked: true },
    { name: "Basketball", category: "Sporting Goods", price: "$29.99", stocked: false },
    { name: "iPod Touch", category: "Electronics", price: "$99.99", stocked: true },
    { name: "iPhone 5", category: "Electronics", price: "$399.99", stocked: false },
    { name: "Nexus 7", category: "Electronics", price: "$199.99", stocked: true },
  ]

  const [filterText, setFilterText] = useState<string>('')
  const [inStockOnly, setInStockOnly] = useState<boolean>(false)

  const filteredProducts = products.filter((product) => {
    if (inStockOnly && !product.stocked) {
      return false
    }
    if (!product.name.toLowerCase().includes(filterText.toLowerCase())) {
      return false
    }
    return true
  })
  
  return (
    <div>
      <SearchBar filterText={filterText} inStockOnly={inStockOnly} onFilterTextChange={setFilterText} onInStockChange={setInStockOnly} />
      <ProductTable products={filteredProducts} />
    </div>
  )
}

function SearchBar({filterText, inStockOnly, onFilterTextChange, onInStockChange}: {
  filterText: string
  inStockOnly: boolean
  onFilterTextChange: (text: string) => void
  onInStockChange: (stock: boolean) => void
}) {
  return (
    <form>
      <input type="text" placeholder="Search..." value={filterText} onChange={(e) => onFilterTextChange(e.target.value)} />
      <label>
        <input type="checkbox" checked={inStockOnly} onChange={(e) => onInStockChange(e.target.checked)} />
        Only show products in stock
      </label>
    </form>
  )
}
function ProductTable({ products }: { products: Product[] }) {
  // sort products by category
  products.sort((a, b) => {
    if (a.category < b.category) {
      return -1
    }
    if (a.category > b.category) {
      return 1
    }
    return 0
  })
  const rows: JSX.Element[] = []
  let lastCategory = ''

  products.forEach((product) => {
    if (product.category !== lastCategory) {
      rows.push(<ProductCategoryRow key={product.category} category={product.category} />)
    }
    rows.push(<ProductRow key={product.name} {...product} />)
    lastCategory = product.category
  })

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {rows}
      </tbody>
    </table>
  )
}
function ProductCategoryRow({ category }: { category: string }) {
  return (
    <tr>
      <th colSpan={2}>{category}</th>
    </tr>
  )
}
function ProductRow(product: Product) {
  const color = product.stocked ? 'black' : 'red'
  return (
    <tr style={{color}}>
      <td>{product.name}</td>
      <td>{product.price}</td>
    </tr>
  )
}

export default FilterProductTable